<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="Date" width="180" />
    <el-table-column prop="title" label="Name" width="180" />
    <el-table-column prop="created_time" label="Address" />
    <el-table-column prop="updated_time" label="Date" width="180" />
    <el-table-column prop="isDefault" label="Name" width="180" />
    <el-table-column prop="type" label="Address" />
    <el-table-column>
      <template #default="scope">
        <router-link to="/draggableMobileEdit">
          <el-button size="small">
            装修
          </el-button>
        </router-link>
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import {reactive} from 'vue';

const tableData = reactive([
  {
    id: 1,
    title: '首页',
    created_time: '2024-11-02',
    updated_time: '2024-11-02',
    isDefault: true,
    type: "index"
  },
  {
    id: 2,
    title: '演示列表',
    created_time: '2024-11-02',
    updated_time: '2024-11-02',
    isDefault: false,
    type: "common"
  }
])

const handleEdit = function () {

}

const handleDelete = function () {
  
}

</script>
